<template>
  <el-card class="box-card" shadow="never">
    <TablePage :tableData="tableData" :currentPage="currentPage" :totalPage="totalPage" @table-checked="tableChecked" @changPage="changPage">
      <template slot="table_column">
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="date" label="日期" width="140"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === 1">男</span>
            <span v-else-if="scope.row.sex === 2">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleQuit(scope.$index, scope.row)">离职</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)" class="del_button">删除</el-button>
          </template>
        </el-table-column>
      </template>
      <template slot="handleoperation">
        <div class="handle_operation">
          <el-button size="small" type="danger" @click="handleAllDelete">删除</el-button>
        </div>
      </template>
    </TablePage>
  </el-card>
</template>

<script>
import TablePage from "_c/TablePage"

export default {
  name: 'table_page',
  components: {
    TablePage
  },
  data() {
    return {
      tableData: [
        {
          id: "bh2112jhbhjb",
          date: "2016-05-02",
          name: "王小虎",
          sex: 1,
          address: "上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄"
        },
        {
          id: "dsas312sd",
          date: "2016-05-04",
          name: "王小虎",
          sex: 2,
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          id: "fgs4343",
          date: "2016-05-01",
          name: "王小虎",
          sex: 2,
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          id: "ku997",
          date: "2016-05-03",
          name: "王小虎",
          sex: null,
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      tableSelectedIds: [],
      currentPage: 1,
      totalPage: 50
    };
  },
  methods: {
    tableChecked (selection) {
      this.tableSelectedIds = selection.map(item => item.id);
      console.log(this.tableSelectedIds)
    },
    changPage (currentPage) {
      console.log("当前页：" + currentPage)
    },
    handleQuit(index, row) {
      console.log(index, row);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row.id);
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.tableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        console.log("已取消删除");
      });
    },
    // 全选删除
    handleAllDelete () {
      let selectedLength = this.tableSelectedIds.length;
      if (selectedLength > 0) {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          console.log("已取消删除");
        });
      } else {
        this.$message({
          type: 'info',
          message: '请选择要删除的条目'
        });
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .del_button {
    color: red;
  }
  .handle_operation {
    margin-top: 10px;
  }
</style>

